$9ff|1-D!ck's Guide to |1-Basic HTML $ff8 Lesson 2 - by D!ck, of course! Lesson 01: Inserting Images Using Tables Creating Links $ffaOK, last time I described how to set up a simple HTML file and control the flow of text within it, in this lesson we're going to learn about images and tables, arguably two of the most important areas of web page design these days, because they enhance the presentation no end. We'll also look at ways to link to other files and sites. $9ff|1-Graphics $fbfImage files are inserted using the IMG tag, it's a one-part tag and the format goes: which will insert the image "blahblah.jpg" into your document at the current text position. There are several parameters to be taken into account though: WIDTH=xx - WIDTH of image in Pixels HEIGHT=yy - HEIGHT of image in Pixels BORDER=nn - BORDER width around image ALT="" - Description string If your browser is intelligent enough to handle it then there is no need to include the WIDTH and HEIGHT params because your image will be sized properly once it is loaded, however, because the HTML is loaded first, there is no way for it to know in advance how big the image will be and so the entire document will have to be re-displayed once the pic is loaded. This can be very annoying, and so it is wise to put the WIDTH and HEIGHT of the image into the tag. An added bonus is that an image can be scaled to any size simply by substituting preferred dimensions for the actual size of the file. If you creade a small bar, say 3x3 pixels, and use the tag: then the bar is stretched across the screen, an effective way of filling a large area with a small graphic image. The BORDER= param is mainly used to prohibit the rendering of a border around the image when it is used as a link. Setting it to 0 means no border is displayed. Finally, the ALT= part will display a line of text in place of the image if graphics are switched off, or if the mouse pointer is held over the image for a few seconds. Because the net can get clogged quite easily, it is recommended that you save any images in both JPEG and GIF format and use the smallest of the two, especially where thumbnails are concerned. Keep your images as small as possible to save download time and bandwidth congestion. $fbe|1-Tables $ffdTables are - as you'd guess - a way of presenting data. They can be used to great effect to aid presentation and formatting of a document, this article itself is in a 600-pixel wide table (on the HTML version anyway!) which is centred in the screen. That way, the file looks the same in either a 640-wide or an 800-wide display. Tables consist of rows and columns, and all tags are enclosures, with rows coming before columns and the whole lot inside the table. To start off, we use:
To define our section, there are the usual options to go with this, plus a couple of specifics: WIDTH=xx - WIDTH of table, either pixels or percent HEIGHT=yy - HEIGHT of table, either pixels or percent BORDER=nn - Thickness of BORDER around cells, 0 = none CELLPADDING=nn - Gap left around cell items in Pixels CELLSPACING=nn - Gap left between cells in Pixels Using these we can set our table up accordingly, we will endeavour to use a 600x200 pixel table, divided into two rows, each with three colums. So to start with, out tag would now look like this:
Now to fill it in. If you are only having one row on your table then you can ignore the rows tags altogether and proceed straight onto the columns, but as we want two of them, we have to define them thus:
This defines them both, generally you don't need to insert params for the Table Rows. The colums are knows as Table Datas, and because we have defined our table as being 600 pixels wide, they will pad out to the full width as default, although they do take WIDTH and HEIGHT params. For this example we'll stick them in anyway for continuity.
To be even more ruthlessly efficient and pedantic, we don't actually NEED to put the WIDTH and HEIGHT params in the second row of 's as the WIDTH is defined in the first row, and the HEIGHT will default to take up all remaining space anyway, but it's neater to do so. Notice that the and tags in the example are on the same line. This is because some browsers - notably Netscape Navigator - insist on this format, otherwise they will insert a gap around the cells which will bugger up your pretty page. The only time I have found this to be too fiddly is when I have lots of text in a cell, in which case I'm not too bothered about the padding anyway. Similarly, some browsers will not display a cell if it contains nothing and so it is wise to test your document on as many browsers as you can before releasing it on an unsuspecting site. There is quite a bit more that you can do with Tables, but this is a guide to the BASIC stuff, for an in-depth tutorial I suggest you get yourselves a book on the subject. $df0|1-Links You will be familiar with links if you havwe ever written an AmigaGuide document. The main difference is that HTML does not support "pages" of information as such, all pages are seperate files, although you CAN jump to a different position within a file, or even in another file, much like Amigaguide. Links are also enclosed tags. This enables you to make just about anything on a page into a link, be it a piece of text or an image, and a simple mouse click will send the user on their way somewhere else, or start a file downloading, or play a sample, almost anything. The basic format is: ... You can replace the "...", above, with anything you like, and line breaks , paragraphs, and seperate lines are all okay, so both of the following are perfectly valid: Dr Dick or Dick's Page In the first example, the text will be underlined and probably a different colour, which can be changed by inserting LINK="#rrggbb" into the BODY tag of the document. In the second example, the image "dick.jpg" becomes the link, although no border is rendered (thanks to "BORDER=0" in the IMG tag), and moving the mouse over the image for a few seconds will produce the text "Dick's Page" in a small floating box. Clicking on either of these will tell your browser to attempt to try and jump to the page defined in the HREF part of the tag, in this case, my own homepage (plug! plug!), but you can link to an archive file, in which case it will be downloaded and can be saved to disk, so: Download TW16 will start the downloading of a ZIP file, or whatever filename you put between the quotes. $ff9 ================= End of lesson 02! ================= If you'd like to influence the way this course runs you can E-Mail any questions to me at Dr.Dick@Virgin.net and I will try to gear the course more towards the things that people are asking. Failing that, you can write to the normal submissions address and ask for your queries to be forwarded on to me by E-Mail. D!ck